<template>
  <div class="anime-msg">
    <div class="tab-control">
      <h2
        @click="clickControl = index"
        v-for="(item, index) in msg_title"
        :class="{ atcive: clickControl === index }"
        :key="index"
      >
        {{ item }}
      </h2>
      <span :class="{ bar: clickControl === 1 }"></span>
    </div>
    <div class="tag-control-msg">
      <AnimeAnthology class="hide" v-show="clickControl === 0" title="播放列表" />
      <AnimeMainMsg class="hide" v-show="clickControl === 1" />
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

import AnimeAnthology from '@/components/ToVideo/AnimeAnthology.vue'
import AnimeMainMsg from '@/components/ToVideo/AnimeMainMsg.vue'

function getTitle() {
  const msg_title = ['选集', '详情']
  return {
    msg_title
  }
}

export default {
  name: 'AnimeMsg',
  components: {
    AnimeAnthology,
    AnimeMainMsg
  },
  setup() {
    const clickControl = ref(0)

    return {
      ...getTitle(),
      clickControl
    }
  }
}
</script>

<style lang="scss" scoped>
.anime-msg {
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
  background-color: $box_bg;
  .tab-control {
    position: relative;
    display: flex;
    gap: 30px;
    margin-bottom: 20px;
    h2 {
      cursor: pointer;
      user-select: none;
      padding: 0 5px;
      width: 44px;
      line-height: 50px;
      font-weight: 600;
      font-size: 22px;
      color: $font_unactive;
      transition: all 0.25s;
    }
    span {
      display: block;
      position: absolute;
      left: 5px;
      bottom: 0;
      width: 44px;
      height: 2px;
      border-radius: 50px;
      background-color: $primary;
      transition: all 0.25s;
    }
    .bar {
      transition: all 0.25s;
      left: calc(59px + 30px);
    }
    .atcive {
      transition: all 0.25s;
      color: $font;
    }
  }
  .tag-control-msg {
    width: 100%;
  }
}
</style>
